<template>
	<scroll-view scroll-y="true" class="pay-container" :data-theme="themeStyle">
		<view class="payment-amount">
			<text class="amount-tit">支付金额</text>
			<view class="amount-num">
				￥
				<text>{{ payInfo.pay_money }}</text>
			</view>
			<view class="payment-name">{{ payInfo.pay_body }}</view>
		</view>
		<view class="btn color-base-border ns-gradient-otherpages-member-widthdrawal-withdrawal" @click="toPay">
			立即支付
		</view>

		<loading-cover ref="loadingCover"></loading-cover>

	</scroll-view>
</template>

<script>
	import loadingCover from '@/components/loading-cover/loading-cover.vue';
	import globalConfig from '@/common/js/golbalConfig.js';
	import auth from '@/common/js/auth.js';

	export default {
		components: {
			loadingCover
		},
		data() {
			return {
				payInfo: {},
				order_id: '',
				token: '',
				weapp_openid: '',
				wx_unionid: '',
				isSub: false
			};
		},
		mixins: [globalConfig, auth],
		onLoad(option) {
			// option.oid = '598';
			// option.mid =
			// 	'MDAwMDAwMDAwMMjbr6mQiWPLj4iuy8WLiJmGznVpsqeZqHuesrK_iaqTvbieZZeJY85-mtPdsq6AZYSoha-xp3-vfnSupcp6ptPGz7ubmnme1o-DrZuxiJqphrh5sLHdma9_ZJR2';
			if (!option.mid || !option.oid) {

				this.$util.showToast({
					title: '支付信息不存在！'
				});
				setTimeout(() => {
					this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
				}, 1500);
				return
			}

			this.order_id = option.oid;
			this.token = option.mid;
			uni.setNavigationBarTitle({
				title: '立即支付'
			})
		},
		onShow() {
			this.getPayInfo();
			uni.setStorageSync('token', this.token);
			this.getCode(data => {
				if (data) {
					this.weapp_openid = data.weapp_openid;
					this.wx_unionid = data.wx_unionid;
				} else {
					this.$util.showToast({
						title: '授权失败，请重新进入支付！'
					});
				}
			});
		},
		methods: {
			getPayInfo() {
				this.$api.sendRequest({
					url: '/api/pay/info',
					data: {
						type: 'order',
						order_id: this.order_id
					},
					success: res => {
						if (res.code >= 0 && res.data) {
							this.payInfo = res.data;
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						} else {
							this.$util.showToast({
								title: '未获取到支付信息！'
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
							}, 1500);
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			async toPay() {
				if (this.isSub) return;
				this.isSub = true;

				let payres = await this.$api.sendRequest({
					url: '/api/pay/setWxInfo',
					async: false,
					data: {
						wx_unionid: this.wx_unionid,
						weapp_openid: this.weapp_openid,
						order_ids: this.payInfo.order_id
					}
				})
				if (payres.code < 0) {
					this.$util.showToast({
						title: payres.message
					});
					return
				}
				let out_trade_no = payres.data;
				uni.setStorageSync('paySource', 'app');

				this.$api.sendRequest({
					url: '/api/pay/pay',
					data: {
						out_trade_no: out_trade_no,
						pay_type: 'wechatpay',
						is_matched: 0,
						scene: 1175
					},
					success: res => {
						uni.hideLoading();
						if (res.code >= 0) {
							var payData = res.data.data;
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: payData.timeStamp,
								nonceStr: payData.nonceStr,
								package: payData.package,
								signType: payData.signType,
								paySign: payData.paySign,
								success: res => {
									this.$util.redirectTo('/otherpages/pay/result/result', {
										code: out_trade_no
									}, '', 'redirectTo');
								},
								fail: res => {
									this.isSub = false;
									if (res.errMsg == 'requestPayment:fail cancel') {
										this.$util.showToast({
											title: '您已取消支付'
										});
									} else {
										uni.showModal({
											content: '支付失败,失败原因: ' + res.errMsg,
											showCancel: false
										});
									}
								}
							});
						} else {
							this.isSub = false;
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						uni.hideLoading();
						this.$util.showToast({
							title: 'request:fail'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	@mixin flex-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	@mixin flex-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pay-container {
		width: 100vw;
		// height: 100vh;

		.btn {
			margin: 0 30rpx;
			margin-top: 60rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			color: #fff;
			text-align: center;

			&.disabled {
				background: #ccc;
				border-color: #ccc;
				color: #fff;
			}
		}

		.payment-amount {
			@include flex-column;
			margin: $margin-updown $margin-both;
			border-radius: 8rpx;
			padding: 20rpx 0 58rpx 0;
			background-color: #fff;

			.amount-tit {
				font-size: $font-size-base;
				color: #838383;
				line-height: 1;
				margin-top: 44rpx;
			}

			.amount-num {
				color: #000;
				margin-top: 36rpx;
				line-height: 1;

				text {
					font-size: $font-size-toolbar;
					color: #000;
				}
			}

			.amount-desc {
				font-size: $font-size-tag;
				color: #838383;
				padding: 0 40rpx;
				width: 100%;
				box-sizing: border-box;
				text-align: center;
				line-height: 1;

				text {
					width: 100%;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.payment-name {
				width: 90%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #838383;
				margin-top: 30rpx;
				text-align: center;
				line-height: 1;
			}
		}
	}
</style>